<template>
  <!-- 右侧边栏内容 -->
  <aside class="col-lg-3">
    <personal-msg></personal-msg>


    <!--<div class="widget-wrap widget-panel">
      <p style="text-align: left;padding-bottom: 10px;line-height: 30px; font-size: 14px;">

        <a href="http:/" target="_blank">

          <img src="../../assets/gif/hot-1.gif">

          主站开通，一起学习更多知识
        </a><br>

        <a href="https://www.aliyun.com/" target="_blank">

          <img src="../../assets/gif/hot-1.gif">

          阿里云ECS拼团新老同享99元/年
        </a><br>

        <a
          href="https://cloud.tencent.com/act/cps/redirect?redirect=1048&amp;cps_key=f6a8af1297bfac40b9d10ffa1270029a&amp;from=console"
          target="_blank">

          <img src="../../assets/gif/hot-1.gif">

          腾讯云双11史无前例的低价
        </a><br>

        <a href="http://www.iocoder.cn/?utm_term=didi" target="_blank">

          <img src="../../assets/gif/hot-1.gif">

          Java进阶必备：源码解析
        </a><br>

        <a href="https://github.com/YunaiV/onemall" target="_blank">

          微服务开源项目：Onemall
        </a><br>

        <a
          href="http://mp.weixin.qq.com/s?__biz=MzUzNzYxNjAzMg==&amp;mid=100003457&amp;idx=1&amp;sn=501a5e49596d85282f316da78e76e063&amp;chksm=7ae5054e4d928c5878deba78aeb9ea15cadae4590b332e73492b0f0f818ab0db63fc14e30313#rd"
          target="_blank">

          关注阿里巴巴云原生公众号，速懂K8s
        </a><br>

        <a href="https://www.openwrite.cn/?utm_term=didi" target="_blank">

          一篇Markdown文章轻松发布10+个平台
        </a><br>

        <a href="/" target="_blank">

          全网最便宜的极客时间购买通道
        </a><br>

      </p>
    </div>-->
  <!--

      <div class="widget-wrap"
           style="box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);">
        <a href="https://coding.net/?utm_source=didispace&amp;utm_medium=banner&amp;utm_campaign=march2019"
           target="_blank">
          <img src="../../assets/coding/340x150.png" style="width: 100%;"/>
        </a>
      </div>

      <div class="widget-wrap"
           style="box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);">
        <a
          href="https://cloud.tencent.com/act/cps/redirect?redirect=1048&amp;cps_key=f6a8af1297bfac40b9d10ffa1270029a&amp;from=console"
          target="_blank">
          <img src="../../assets/adv/tengxun-345x135.jpg" style="width: 100%;"/>
        </a>
      </div>
  -->


    <!--
        &lt;!&ndash; 专类分类 &ndash;&gt;
    -->
    <div class="widget-wrap widget-panel">
      <ul class="media-list">
        <li class="media">
          <a href="http://www.hao127.com.cn" target="_blank">
            <div class="media-left">
              <img class="media-object" src="../../assets/icon/spring-boot.svg" style="width: 55px;">
            </div>
            <div class="media-body">
              <h4 class="media-heading" style="font-weight: bold;margin-bottom: 10px;">Spring
                Boot基础教程</h4>
              <p>全网Star最多的Spring Boot免费教程，，目前正在更新2.x版本内容哦！</p>
            </div>
          </a>
        </li>
        <hr>
        <li class="media">
          <a href="http://www.hao127.com.cn" target="_blank">
            <div class="media-left">
              <img class="media-object" src="../../assets/icon/spring-cloud.svg"
                   style="width: 46px;margin-right: 5px;margin-left: 4px;">
            </div>
            <div class="media-body">
              <h4 class="media-heading" style="font-weight: bold;margin-bottom: 10px;">Spring
                Cloud基础教程</h4>
              <p>全网最早最全的Spring Cloud免费教程，目前正在更新Alibaba模块与G版本哦！</p>
            </div>
          </a>
        </li>
        <hr>
        <li class="media">
          <a href="http://www.hao127.com.cn" target="_blank">
            <div class="media-left">
              <img class="media-object" src="../../assets/icon/microservice.svg" style="width: 55px;">
            </div>
            <div class="media-body">
              <h4 class="media-heading" style="font-weight: bold;margin-bottom: 10px;">微服务专题整理</h4>
              <p>最热门的分布式架构设计，微服务到底好不好？您的团队到底适合不适合？</p>
            </div>
          </a>
        </li>
        <hr>
        <li class="media">
          <a href="http://www.hao127.com.cn" target="_blank">
            <div class="media-left">
              <img class="media-object" src="../../assets/icon/正则表达式.svg"
                   style="width: 38px;margin-right: 9px;margin-left: 8px;">
            </div>
            <div class="media-body">
              <h4 class="media-heading" style="font-weight: bold;margin-bottom: 10px;">正则表达式完整教程</h4>
              <p>正则表达式太复杂，学不会？看看这个专题能帮到你不！</p>
            </div>
          </a>
        </li>
      </ul>
    </div>


    <!---->

    <Category :categoryList="categoryList"></Category>
    <div id="toTop" class="fa fa-angle-up"></div>
  </aside>
</template>

<script>
  import PersonalMsg from './components/PersonalMsg'
  import Category from './components/Category'
  import {getAllCategorys} from '../../api/category'

  export default {
    components: {PersonalMsg, Category},

    data() {
      return {
        categoryList: []
      }

    },
    created() {
      this.getCategoryList();
    },
    methods: {
      getCategoryList() {
        getAllCategorys().then(res => {

          this.categoryList = res.data

        })
      }
    }

  }
</script>

<style>

</style>
